<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>案例——天气查询</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
		<style>
			#app-weather{
				width: 60%;
				margin: auto;
			}
		</style>
	</head>
	<body>
		<div id="app-weather" class="text-center">
			<h1>天气查询</h1>
			<div class="input-group">
				<input class="form-control" placeholder="请输入要查询天气的城市名" type="text" @keyup.Enter="query(city)" v-model="city"/>
				<span class="input-group-btn">
					<input type="submit" value="点击查询" @click="query(city)" class="btn btn-info"/>
				</span>
			</div>
				
			<ul class="nav nav-pills">
				<li role="presentation"  v-for="itcty in defaultCity" @click="query(itcty)"><a href="#">{{itcty}}</a></li>
			</ul>
				
			<ul v-for="item in weatherList" class="list-unstyled">
				<li>
					<div class="panel panel-default panel-info">
						<div class="panel-heading">
							<span>{{item.date}}</span>
						</div>
						<div class="panel-body">
							<span>{{item.type}}</span>&nbsp;&nbsp;&nbsp;
							<span>{{item.high}}</span>&nbsp;
							<span>{{item.low}}</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script>
			var weatherApp = new Vue({
				el:"#app-weather",
				data:{
					city:"",
					weatherList:[],
					defaultCity:[
						"北京","上海","广州","深圳","杭州"
					]
				},
				methods:{
					query:function(city){
						var that=this;
						axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+city).then(
							function(respone){
//								console.log(respone);
//								console.log(respone.data.data.forecast);
								that.weatherList=respone.data.data.forecast;
								console.log(that.weatherList);
							},
							function(err){
								console.log(err);
							}
						)
					}
				}
			})
		</script>
	</body>
</html>
